<template>
  <view class="rideshare-container">
    <!-- 状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @tap="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">顺风车</text>
      </view>
      <view class="nav-right">
        <text class="more-icon">⋯</text>
      </view>
    </view>

    <!-- 地点选择区域 -->
    <view class="location-section">
      <view class="location-input-container">
        <view class="location-input-item">
          <view class="location-dot departure-dot"></view>
          <input 
            class="location-input" 
            v-model="departureLocation" 
            placeholder="请输入出发地点" 
            placeholder-class="input-placeholder"
          />
        </view>
        <view class="location-input-item">
          <view class="location-dot destination-dot"></view>
          <input 
            class="location-input" 
            v-model="destinationLocation" 
            placeholder="请输入目的地点" 
            placeholder-class="input-placeholder"
          />
        </view>
      </view>
      
      <!-- 立即出发按钮 -->
      <view class="departure-btn" @tap="departureNow">
        <text class="departure-text">立即出发</text>
      </view>
    </view>

    <!-- 行程列表 -->
    <view class="trip-list">
      <view class="trip-item" v-for="(trip, index) in tripList" :key="index">
        <view class="trip-time">
          <text class="date-icon">📅</text>
          <text class="time-text">{{ trip.date }} {{ trip.time }}</text>
        </view>
        
        <view class="trip-route">
          <view class="route-item">
            <view class="location-dot departure-dot"></view>
            <text class="route-text">{{ trip.departure }}</text>
          </view>
          <view class="route-item">
            <view class="location-dot destination-dot"></view>
            <text class="route-text">{{ trip.destination }}</text>
          </view>
        </view>
        
        <view class="trip-info">
          <view class="seats-info">
            <text class="seats-icon">👥</text>
            <text class="seats-text">可提供{{ trip.seats }}座</text>
          </view>
          <view class="price-info">
            <text class="price-label">预估</text>
            <text class="currency">C$</text>
            <text class="price">{{ trip.price }}</text>
          </view>
        </view>
        
        <view class="driver-info">
          <view class="driver-avatar-container">
            <image class="driver-avatar" :src="trip.driver.avatar" mode="aspectFill"></image>
          </view>
          <text class="driver-name">{{ trip.driver.name }}</text>
          <view class="gender-icon" :class="trip.driver.gender">
            <text v-if="trip.driver.gender === 'male'">♂</text>
            <text v-else>♀</text>
          </view>
          <view class="contact-btn" @tap="contactDriver(trip.driver)">
            <text class="contact-text">立即联系</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
  </view>
</template>

<script>
export default {
  name: 'Rideshare',
  data() {
    return {
      departureLocation: '',
      destinationLocation: '',
      tripList: [
        {
          date: '2月23日',
          time: '07:32',
          departure: 'KUMAMON公寓南门9号',
          destination: 'California, Los Angeles-1234 Oak Street',
          seats: 4,
          price: '56.05',
          driver: {
            name: '人形红辣椒1号',
            avatar: '/static/avatar1.jpg',
            gender: 'male'
          }
        },
        {
          date: '2月23日',
          time: '17:32',
          departure: 'KUMAMON公寓南门19号',
          destination: 'California, Los Angeles-1234 Oak Street',
          seats: 4,
          price: '86.05',
          driver: {
            name: '锺迪',
            avatar: '/static/avatar2.jpg',
            gender: 'female'
          }
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    departureNow() {
      console.log('立即出发');
    },
    contactDriver(driver) {
      console.log('联系司机：', driver.name);
    }
  }
}
</script>

<style scoped>
.rideshare-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  position: relative;
}

/* 状态栏 */
.status-bar {
  height: 44px;
  background-color: #ffffff;
}

/* 顶部导航栏 */
.navbar {
  height: 56px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #f0f0f0;
}

.nav-left, .nav-right {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 24px;
  color: #000000;
  font-weight: bold;
}

.more-icon {
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  letter-spacing: 2px;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

/* 地点选择区域 */
.location-section {
  background-color: #ffffff;
  margin: 16px;
  padding: 24px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.location-input-container {
  margin-bottom: 20px;
}

.location-input-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.location-input-item:last-child {
  margin-bottom: 0;
}

.location-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 16px;
}

.departure-dot {
  background-color: #FFC107;
}

.destination-dot {
  background-color: #4CAF50;
}

.location-input {
  flex: 1;
  height: 44px;
  font-size: 16px;
  color: #333333;
  background: transparent;
}

.input-placeholder {
  color: #999999;
}

/* 立即出发按钮 */
.departure-btn {
  width: 120px;
  height: 36px;
  background-color: #E0E0E0;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}

.departure-text {
  font-size: 14px;
  color: #666666;
}

/* 行程列表 */
.trip-list {
  padding: 0 16px;
}

.trip-item {
  background-color: #ffffff;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 行程时间 */
.trip-time {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.date-icon {
  font-size: 16px;
  margin-right: 8px;
}

.time-text {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

/* 路线信息 */
.trip-route {
  margin-bottom: 16px;
}

.route-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.route-item:last-child {
  margin-bottom: 0;
}

.route-text {
  font-size: 14px;
  color: #333333;
  margin-left: 16px;
}

/* 行程信息 */
.trip-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.seats-info {
  display: flex;
  align-items: center;
}

.seats-icon {
  font-size: 16px;
  margin-right: 4px;
}

.seats-text {
  font-size: 14px;
  color: #666666;
}

.price-info {
  display: flex;
  align-items: center;
}

.price-label {
  font-size: 12px;
  color: #999999;
  margin-right: 4px;
}

.currency {
  font-size: 14px;
  color: #FF9800;
  margin-right: 2px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #FF9800;
}

/* 司机信息 */
.driver-info {
  display: flex;
  align-items: center;
}

.driver-avatar-container {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.driver-avatar {
  width: 100%;
  height: 100%;
}

.driver-name {
  font-size: 14px;
  color: #333333;
  margin-right: 8px;
}

.gender-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: auto;
}

.gender-icon.male {
  background-color: #2196F3;
  color: #ffffff;
}

.gender-icon.female {
  background-color: #E91E63;
  color: #ffffff;
}

.contact-btn {
  width: 80px;
  height: 32px;
  background-color: #FFC107;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-text {
  font-size: 12px;
  color: #000000;
  font-weight: 500;
}

/* 底部指示器 */
.bottom-indicator {
  height: 34px;
}
</style>
